<template>
	<view class="modal_wrap">
		<view class="top_nav">
			<view class="top_nav_item" @click="toHome('threeHome')">椅骨包</view>
			<view class="top_nav_item" @click="toHome('newHome')">呼翻退</view>
		</view>
		<view class="click-box1" @click="showModal"></view>
		<view class="click-box2" @click="handleModal('拣配区')"></view>
		<view class="click-box3" @click="handleModal('空箱区')"></view>
		<view class="cu-modal" :class="modalVisible?'show':''">
			<view class="cu-dialog" style="width: 80vw;">
				<view class="cu-bar bg-white justify-end" style="height: 8vh;">
					<view class="content" style="font-size: 3vh;">选择上料位</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red" style="font-size: 4vh;"></text>
					</view>
				</view>
				<view style="height: 50vh; overflow-y: auto; padding: 2vh 2vw;" class="btn-wrap ">
					<view class="box-btn" v-for="(el, i) in positionList" :key="i" @click="goUpGoods(el)">
						{{el}}
					</view>
				</view>
				<view class="cu-bar bg-white justify-end" v-if="false">
					<view class="action">
						<button class="cu-btn line-green text-green" @tap="hideModal">取消</button>
						<button class="cu-btn bg-green margin-left" @tap="onConfirm">确定</button>
					</view>
				</view>
			</view>
		</view>

		<view class="cu-modal" :class="modalVisibles?'show':''">
			<view class="cu-dialog" style="width: 80vw;">
				<view class="cu-bar bg-white justify-end" style="height: 8vh;">
					<view class="content" style="font-size: 3vh;">拣配区</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red" style="font-size: 4vh;"></text>
					</view>
				</view>
				<view style="height: 26vh; overflow-y: auto; padding: 2vh 2vw;" class="btn-wrap2">
					<view class="sm_title text-left" style="width: 100%;">
						选择配料点:
					</view>
					<view class="box-btn2" :class="el ===  check1? 'bg-blue' : 'bg-grey'" v-for="(el, i) in itemList1"
						:key="i" @click="checkOut('1', el)">
						{{el}}
					</view>
				</view>
				<view style="height: 26vh; overflow-y: auto; padding: 2vh 2vw;" class="btn-wrap2">
					<view class="sm_title text-left" style="width: 100%;">
						选择上料点:
					</view>
					<view class="box-btn2" :class="el ===check2  ? 'bg-blue' : 'bg-grey'" v-for="(el, i) in itemList2"
						:key="i" @click="checkOut('2', el)">
						{{getLabel(el)}}
					</view>
				</view>

				<view class="cu-bar bg-white justify-end" style="height: 15vh;font-size: 3vh;">
					<view class="action">
						<view class=" bg-green send_btn" @click="sendTask1">发送任务</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				modalVisibles: false,
				modalVisible: false,
				positionList: [],
				itemList1: [],
				itemList2: [],
				check1: '',
				check2: '',
				dataObj: [{
					label: '正驾风扇[D001]',
					value: 'D001'
				}, {
					label: '正驾旁侧板[D002]',
					value: 'D002'
				},{
					label: '副驾风扇[D003]',
					value: 'D003'
				},{
					label: '副驾旁侧板[D004]',
					value: 'D004'
				}]
			}
		},
		onLoad() {

		},
		mounted() {
			this.initData('2', 1)
			this.initData('6', 2)
		},
		methods: {
			toHome(url) {
				uni.navigateTo({
					url: '/pages/index/' + url
				})
			},
			checkOut(flag, el) {
				console.log(flag, el, '++')
				if (flag === '1') {
					if (this.check1 === el) {
						this.check1 = ''
						return
					}
					this.check1 = el
				}
				if (flag === '2') {
					if (this.check2 === el) {
						this.check2 = ''
						return
					}
					this.check2 = el
				}
			},
			getLabel (val) {
				return this.dataObj.find(el => el.value === val).label
			},
			initData(key, flag) {
				const that = this
				this.$api.postAPI('/task/getlistdatabytype?type=' + key, {}).then(res => {
					if (flag === 1) that.itemList1 = res.data
					if (flag === 2) that.itemList2 = res.data

				})
			},
			hideModal() {
				this.modalVisible = false
				this.modalVisibles = false
			},
			showModal() {
				const that = this
				this.$api.postAPI('/task/getlistdatabytype?type=1', {}).then(res => {
					that.positionList = res.data
					this.modalVisible = true
				})
			},
			goUpGoods(key) {
				uni.navigateTo({
					url: '/pages/upgoods/index?key=' + key + '&title=上料区'
				})
			},
			handleModal(key) {
				if (key === '拣配区') {
					this.modalVisibles = true
					return
				}
				uni.navigateTo({
					url: '/pages/upgoods/index?title=' + key
				})
			},
			sendTask1() {
				let that = this
				if (!this.check1) {
					uni.showModal({
						title: '提示',
						content: '请先选择配料点！'
					})
					return
				}
				if (!this.check2) {
					uni.showModal({
						title: '提示',
						content: '请先选择上料点！'
					})
					return
				}
				uni.showModal({
					title: '提示',
					content: '确认是否发送任务?',
					success: res => {
						if (res.cancel) return
						uni.showLoading({
							title: '提交中!',
							mask: true
						})
						const params = {
							"locationNo": that.check1,
							"locationNo2": that.check2,
							"type": 2
						}
						that.$api.postAPI('/Task/SendToFeedingArea', params).then(res => {
							uni.hideLoading()
							if (!res.success) {
								uni.showModal({
									title: '提示',
									content: '任务发送失败:' + res.data
								})
							} else {
								uni.showToast({
									title: '任务发送成功',
								})
							}
						})
					}
				})
			},
		}
	}
</script>

<style scoped>
	.modal_wrap {
		width: 100vw;
		height: 100vh;
		box-sizing: border-box;
		background-image: url(../../static/old_bg.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: relative;
	}

	.click-box1 {
		position: absolute;
		right: 44.11vw;
		top: 20.19vh;
		width: 19.74vw;
		height: 59.44vh;
	}

	.click-box2 {
		position: absolute;
		position: absolute;
		right: 23.13vw;
		top: 20.19vh;
		width: 19.74vw;
		height: 59.44vh;
	}

	.btn-wrap {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}


	.btn-wrap2 {
		display: flex;
		flex-wrap: wrap;
		/* justify-content: space-between; */
		align-items: center;
	}

	.box-btn {
		width: 17vw;
		height: 9.16vh;
		border-radius: 1vh;
		font-size: 3.98vh;
		color: #fff;
		background-color: #004ea1;
		font-weight: bolder;
		line-height: 9.16vh;
	}

	.click-box3 {
		position: absolute;
		right: 1.93vw;
		top: 20.19vh;
		width: 19.74vw;
		height: 59.44vh
			/* background-color: red; opacity: 0.5; */
		;
	}

	.send_btn {
		width: 17vw;
		height: 9.16vh;
		margin-left: 8.22vw;
		border-radius: 1vh;
		font-size: 3.98vh;
		color: #004ea1;
		background-color: #bcd500;
		font-weight: bolder;
		line-height: 9.16vh;
	}

	.box-btn2 {
		/* width: 12vw; */
		padding: 0 2vw;
		height: 6.16vh;
		border-radius: 1vh;
		font-size: 2.98vh;
		color: #fff;
		/* background-color: #004ea1; */
		font-weight: bolder;
		line-height: 6.16vh;
		margin-left: 3vw;
	}

	.sm_title {
		font-size: 2.98vh;
		font-weight: bolder;
	}
</style>